<template>
  <div class="component-upload-image" style="position: relative">
    <el-upload
      :action="uploadImgUrl"
      list-type="picture-card"
      :on-success="handleVideoSuccess"
      :before-upload="beforeUploadVideo"
      :on-error="handleUploadError"
      :on-progress="uploadVideoProcess"
      name="file"
      :show-file-list="false"
      :headers="headers"
      style="display: inline-block; vertical-align: top"
    >
      <video v-if="video && isShow"
             :src="video"
             style="width: 250px;height: 150px;object-fit:fill;margin:-1px"
             class="avatar video-avatar"
             controls="controls">
      </video>
      <i v-else-if="!isShow && !videoFlag"
         class="el-icon-plus avatar-uploader-icon"></i>
      <el-progress
        v-if="videoFlag == true"
        type="circle"
        :percentage="videoUploadPercent"
        style="margin-top:7px;"></el-progress>
    </el-upload>
<!--    有视频，isShow的值为false，并且是查看就显示-->
    <i v-if="video && isShow && status" class="el-icon-circle-close delect" @click="del"></i>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";

export default {
  name: "index",
  data(){
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/file/add",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      isShow:false,
      video:'',
    }
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    status: {
      type :Boolean,
      default: false,
    }
  },

  watch: {
    value: {
      handler(val) {
        if (val) {
          // 首先将值转为数组
          const list =  this.value.split(',');
          // 然后将数组转为对象数组
          list.map(item => {
            if (typeof item === "string") {
              this.video = item
              this.isShow = true
              console.log("111",this.video)
            }
          });
        } else {
          this.video = '';
          return '';
        }
      },
      //深层监视
      deep: true,
      //进入页面立即执行handler函数
      immediate: true
    }
  },
  methods: {
    //成功
    handleVideoSuccess(res) {
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.isShow = true;
      this.videoUploadPercent = 0;
      console.log(res)
      //后台上传地址
      if (res.code == 200) {
        this.video = res.url
        this.$emit("input", res.data.filePath);
      } else {
        this.$message({
          type: "error",
          message: res.Message,
        });
      }
    },
    beforeUploadVideo(file) {
      let fileSize = file.size / 1024 / 1024 < 150;
      if (['video/mp4'].indexOf(file.type) == -1) {
        this.$message({
          type: "error",
          message: '请上传正确的视频格式',
        });
        return false;
      }
      if (!fileSize) {
        this.$message({
          type: "error",
          message: '视频大小不能超过150MB',
        });
        return false;
      }
      this.isShowUploadVideo = false;
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    handleUploadError() {
      this.$message({
        type: "error",
        message: "上传失败",
      });
      this.loading.close();
    },
  //  删除
    del(){
      this.video = '';
      this.$emit("input", '');
      this.isShow = false;
    },
  },
}
</script>

<style lang="scss" scoped>
.delect{
  position: absolute;
  z-index: 99;
  top: -5px;
  left: 245px;
}
</style>
